<template>
     <!-- 最大的盒子开始 -->
    <div class="shopCar">
        <div class="container">
            <!-- 顶部开始 -->
            <div class="shoptop">
                <!-- @click="$router.go(-1)"  路由跳转-1 -->
                <a  @click="$router.go(-1)" class="back_a"><i class="icon-back" style="font-size:23px ;line-height: 42px;"></i></a>
                <div class="shopcenter">购物车</div>
                <div class="shopright"></div>
            </div>
            <!-- 顶部结束 -->
            <div class="address">配送至{{fieldValueName}}</div>

            <!-- 品质保障开始 -->
            <div class="brand">
                <div></div>
            </div>
            <!-- 品质保障结束 -->

            <!-- 购物车开始 -->
            <div class="card">
                <div class="shopcard">
                    <!-- v-if="!shopProductList" -->
                   <div class="shopcardblank"  v-if="!shopProductList.length">
                        <div class="tops">
                            <img src="../assets/image/placeholder_shoppingcart.png" class="auto-img" alt="">
                        </div>
                        <p class="cart-empty__title">购物车空空如也，快去挑选中意好货吧~</p>
                        <div class="btns">
                            <router-link tag="div" to="/home">马上抢购</router-link >
                            <router-link to="/myCollect" tag="div">查看收藏好货</router-link>
                        </div>
                   </div>
                   <div class="shopcardcontent" v-if="shopProductList.length">
                        <div class="shopcardtitle">
                            <div class="title-box">唯品自营</div>
                        </div>
                        <div class="card-item-lists">
                                <van-swipe-cell v-for="(item,index) in shopProductList" :key="index">
                                    <!-- 选择按钮 -->
                                    <!-- <div :class="['cart-checkbox',{'checked':item.checked}]"></div> -->
                                    <input type="checkbox" class="cart-checkbox" :checked="item.checked" @click="checked(index)">
                                 <van-card
                                    :num="item.num"
                                    :price="item.minPrice"  
                                    :desc="item.color + item.size"
                                    :title="item.productTitle"
                                    :thumb="item.image"
                                  >
                                    <template #tags>
                                      <van-tag plain type="danger">10天价保</van-tag>
                                    </template>
                                    <template #footer>
                                      <van-button size="mini" class="subBtn" @click="subBtn(index)">-</van-button>
                                      <van-button size="mini" class="addBtn" @click="addBtn(index)">+</van-button>
                                    </template>
                                  </van-card>
                                  <template #right>
                                     <van-button square type="primary" :text="collectName" @click="collect" class="collect-button" />
                                    <van-button square text="删除" type="danger" class="delete-button" @click="del(index)" />
                                  </template>
                                </van-swipe-cell>
                            </div>
                   </div>
                </div>
            </div>
            <!-- 购物车结束 -->
            <div class="fonter">——没有更多了——</div>

            <div class="cart-footer"  v-if="shopProductList.length">
                 <!-- 选择按钮 -->
                <!-- <div :class="['car-checkbox',{'checked':toggleAll}]"></div> -->
                <input type="checkbox" class="car-checkbox" v-model="toggleAll" :checked="toggleAll">
                <div class="textCheck">已选({{numer}})</div>
                <div class="total">总价<span>￥{{total}}</span></div>
                <div class="btn" @click="all">结算</div>
            </div>
        </div>
    </div>
    <!-- 最大的盒子结束 -->
</template>

<script>
    export default {
        name:"shopCarView",
        props:["shopProductList"],
        data() {
            return {
                fieldValueName: '广州',
                num:"",
                collectName:"收藏"
            };
        },
        methods:{
            //增加方法
            subBtn(index){
                this.$emit("subBtn",index)
            },

            // 删除方法
            addBtn(index){
                this.$emit("addBtn",index)
            },
            // 选择方法
            checked(index){
                this.$emit("checked",index)
            },
            // 结算按钮
            all(){
                this.$toast.success("进入支付界面");
                this.$router.push("/payment")
            },
            // 删除按钮
            del(index){
                this.$emit("del",index)
            },
            // 收藏按钮
            collect(){
                 
                if(this.collectName == "收藏"){
                    this.collectName = "已收藏",
                    window.localStorage.setItem("product1","product1");
                }else{
                   this.collectName = "收藏",
                    window.localStorage.removeItem("product1");
                }
            }
        },
        computed:{
            // 全选按钮
           "toggleAll":{
                get(){
                  return  this.shopProductList.every(item => item.checked)
                },
                set(value){
                    // console.log(value);
                    this.$emit("toggleAll",value);
                }
            },
            // 总价计算
            total(){
                  return this.shopProductList.reduce((total,item)=>{
                      if(item.checked){
                          return total += item.minPrice * item.num;
                      }else{
                          return total;
                      }
                  },0)
              },
            //   数量计算
              numer(){
                  return this.shopProductList.reduce((numer,item)=>{
                      if(item.checked){
                          return numer += item.num;
                      }else{
                          return numer;
                      }
                  },0)
              },
        },
        mounted(){
            console.log(this.shopProductList);
            if(this.shopProductList.length > 0){
                this.fieldValueName = this.shopProductList[0].fieldValue
            }
            
        },
        created(){
            // 收藏
             let product1 = window.localStorage.getItem("product1")
            if(product1){
                this.collectName = "已收藏";
            }
        }
    }
</script>

<style lang="scss" scoped>

.van-multi-ellipsis--l2{
    -webkit-line-clamp: 1;
    margin-bottom:10px ;
    font-size: 16px;
    color: #222;
    width: 200px;
    height: 15.5px;
    // text-overflow: ellipsis;
    // white-space: nowrap;
    // overflow: hidden;

}

.shopCar{

.cart-footer{
    display: flex;
    align-items: center;
    height: 61px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e0e0e3;
    padding-left:15px ;
    box-sizing: border-box;


    .car-checkbox{
        z-index: 100;
        width: 18px;
        height: 18px;
        background: url("../assets/image/按钮.png") no-repeat center center /cover;
    }
    .car-checkbox.checked{
        background-image: url("../assets/image/按钮2.png");
    }

    .textCheck{
        margin-left: 8px;
        color: #585c64;
        font-size: 14px;
        width: 60px;
    }
    .total{
        width: 100px;
        margin-left: 12px;
        color: #232323;
        font-size: 14px;
        span{
            font-size: 17px;
            font-weight: bold;
            color: #f03867;
        }
    }
    .btn{
        margin-left: 30px;
        width: 110px;
        height: 45px;
        border-radius: 5px;
        background-color: #f03867;
        font-size: 16px;
        line-height: 45px;
        text-align: center;
        color: #fff;
    }
}

    .subBtn{
    position: absolute;
    top: 83px;
    right: 75px;
    .van-button__text{
        font-size: 18px;
    }
}
.addBtn{
    position: absolute;
    top: 83px;
    right: 22px;
    .van-button__text{
        font-size: 18px;
    }
}
.van-card__num{
    width: 82px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 14px;
}

.van-card__price{
    color: #f03867;
    font-size:16px;
    font-weight: 550;
}

.van-tag--plain::before{
    border: none;
}
.van-tag{
    width: 70px;
    height: 15px;
    display: block;
    text-align: center;
    font-size:12px ;
    transform: scale(0.9)translateX(-3px);
    background-color: #edf3ff;
    border:none;
    color: #627db6;
    outline: none;
    padding: 0;
    margin-bottom: 5px;
}

.van-card__desc{
    background-color: #f6f6f6;
    padding: 0 8px;
    width: 60px;
    font-size: 12px;
    margin-bottom:10px ;
    color: #585c64;;
}

.cart-checkbox{
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    width: 18px;
    height: 18px;
    background: url("../assets/image/按钮.png") no-repeat center center /cover;

}
.cart-checkbox.checked{
    background-image: url("../assets/image/按钮2.png");
}
 .goods-card {
    margin: 0;
    background-color: white;
  }

  .delete-button,.collect-button {
    height: 100%;
  }
    .shopcardcontent{
        display: flex;
        flex-direction: column;

        .shopcardtitle{
            padding: 15px 15px 0;
            display: flex;
            .title-box{
                font-size: 17px;
                font-weight: 550;
                color: #222;
                line-height: 22px;
            }
        }

        .card-item-lists{
            padding: 25px 15px;
        }
    }
      body{
            background-color: #f3f4f5;
        }
        .shopCar{
            height: 100%;
            background-color: #f3f4f5;
        }
        // .container{
        //     background-color: #f3f4f5;
        // }
        .shoptop{
            display: flex;
            background-color: #fff;
            height: 43px;
            text-align: center;
            line-height: 42px;
            
        }
        .shoptop>.back_a{
            display: block;
            padding-left: 14px;
            
        }
        .shopcenter{
            width: 263px;
            height: 43px;
            flex: 1;
            font-size: 18px;
            margin-left: 10px
        }
        .shopright{
            width:55px ;
            height: 43px;
        }
        .address{
            display: flex;
            background-color: #fff;
            text-align: center;
            height: 35px;
            line-height: 35px;
            width: 100%;
            justify-content: center;
            font-size: 12px;
            color: #98989f;
            margin-bottom: 12px;
        }
        .brand{
            width: 100%;
            height: 40px;
            box-sizing: border-box;
            padding: 0 8px 10px 8px;
            border-radius: 5px;
            overflow: hidden;
        }
        .brand>div{
            width: 100%;
            height: 100%;
            background: url(../assets/image/shoppingcart.png)no-repeat center center/cover;

        }
        .card{
            width: 100%;
            // height: 200px;
            background-color: #f3f4f5;
            padding: 0 8px;
            box-sizing: border-box;
        }
        .card .shopcard{
            width:  100% ;
            // height: 200px;
            border-radius: 10px;
            overflow: hidden;
            background-color: #fff;
        }
        .card .shopcardblank{
            height: 200px;
        }
        .shopcard .tops{
            margin: 10px auto 0;
            width: 132px;
            height: 78px;

        }
        .shopcard .cart-empty__title{
            text-align: center;
            margin: 10px 0 20px;
            color: #585c64;
            font-size: 14px;
        }
        .shopcard .btns{
            display: flex;
            justify-content: center;

        }
        .shopcard .btns>div{
            width: 110px;
            height: 30px;
            margin-bottom: 25px;
            margin-right: 10px;
            text-align: center;
            line-height: 28px;
            border: 1px solid #f03867;
            color: #f03867;
            border-radius: 15px;
            font-size: 14px;
        }
        .fonter{
            width: 130px;
            margin: 15px auto;
            font-size: 12px;
            line-height: 20px;
            color: #98989f;

        }
}
</style>